<template>
  <div class="content-header">
    <el-row style="padding: 0px 10px">
      <el-card class="box-card mian-card-header">
        <el-page-header
          @back="backHome"
          icon="el-icon-arrow-left"
          :content="cardName"
          title="返回主页"
        />
      </el-card>
    </el-row>

    <el-scrollbar>
      <el-row>
        <el-row
          v-loading="list_loading_resource"
          element-loading-text="拼命加载资源中"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="margin: 0 10px 10px 10px; width: -webkit-fill-available"
        >
          <div
            style="
              min-height: 9.375rem;
              background-color: #ffffff;
              margin: 0 25px 0 25px;
            "
            v-show="list_loading_resource"
          ></div>
          <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 12 }"
            :lg="{ span: 8 }"
            :xl="{ span: 8 }"
            v-for="(cardItem, index) in cardList"
            :key="index"
          >
            <el-card
              class="card_child re-card-list-item"
              shadow="hover"
              :body-style="{ padding: '20px' }"
            >
              <template #header>
                <a
                  target="_blank"
                  :href="
                    'http://localhost:3000/detail?rid=' + cardItem.recommendId
                  "
                >
                  <img
                    width="64"
                    height="64"
                    :src="cardItem.icon"
                    class="image"
                  />
                  <div>
                    <span class="home_card_title" style="font-size: 18px">{{
                      cardItem.recommendName
                    }}</span>
                    <div class="bottom">
                      <div class="home_card_content">
                        {{ cardItem.description }}
                      </div>
                      <!-- 标签模块 -->
                      <div>
                        <span v-for="(tag, index) in cardItem.tag" :key="index">
                          <el-tag class="tag-style" effect="plain" type="info">
                            {{ tag }}
                          </el-tag>
                        </span>
                      </div>
                    </div>
                  </div>
                </a>
              </template>
              <el-button-group>
                <!--访问按钮 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="直接访问"
                  placement="top-start"
                >
                  <el-button
                    icon="el-icon-paperclip"
                    @click="handleLink(cardItem.link)"
                  >
                  </el-button>
                </el-tooltip>
                <!-- 分享按钮 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="分享"
                  placement="top-start"
                >
                  <el-button
                    icon="el-icon-share"
                    @click="handleCpoy(cardItem.recommendId)"
                  >
                  </el-button>
                </el-tooltip>
                <!-- 收藏按钮 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="收藏"
                  placement="top-start"
                  v-if="cardItem.hasCollect === false"
                >
                  <el-button
                    :data-id="cardItem.recommendId"
                    ref="collect"
                    icon="el-icon-star-off"
                    @click="handleClick($event, cardItem.recommendId, index)"
                  >
                    {{ cardItem.collectNumber }}
                  </el-button>
                </el-tooltip>
                <!-- 取消收藏按钮 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="取消收藏"
                  placement="top-start"
                  v-else
                >
                  <el-button
                    :data-id="cardItem.collectNumber"
                    ref="collect"
                    icon="el-icon-star-on"
                    type="warning"
                    @click="handleClick($event, cardItem.collectNumber, index)"
                  >
                    {{ cardItem.collectNumber }}
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </el-card>
          </el-col>
        </el-row>

        <!-- <el-row style="width: -webkit-fill-available;" v-show="infoStatus">
					<el-card shadow="never" class="card-page">
						<el-empty description="未搜索到相关内容" >
							<el-button type="primary" @click.native="goRecommend()">我要推荐资源</el-button>
						</el-empty>
					</el-card>
				</el-row> -->

        <el-row style="width: -webkit-fill-available" v-show="pageNationView">
          <el-card shadow="never" class="re-card-page">
            <el-pagination
              ref="mainPage"
              background
              layout="prev, pager, next, total"
              :total="listNum"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="pageChange"
            >
            </el-pagination>
          </el-card>
        </el-row>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { LocationQueryValue } from "vue-router";

export default {
  setup() {
    return {
      options: ref([
        {
          value: "Java",
          label: "Java",
        },
        {
          value: "Python",
          label: "Python",
          // disabled: true,
        },
        {
          value: "C语言",
          label: "C语言",
        },
        {
          value: "C++",
          label: "C++",
        },
        {
          value: "JavaScript",
          label: "JavaScript",
        },
      ]),
      value: ref([]),
    };
  },
  created() {
    // setTimeout(function() { }, 5000);
    this.search_resource(this.$route.name, 1, 6);
  },
  data() {
    return {
      //-1代表都不选择，改变量对应buttonGroup选中的按钮index
      activeClass: 0,
      cardName: this.$route.meta.title,
      list_loading_resource: true,
      pageNationView: false,
      infoStatus: false,
      listNum: 0,
      currentPage: 1,
      pageSize: 6,
      cardList: [],
      buttonGroup: [
        {
          index: 0,
          name: "默认",
        },
        {
          index: 1,
          name: "收藏",
        },
        {
          index: 2,
          name: "浏览",
        },
      ],
    };
  },
  methods: {
    changePageTotalStyle() {
      this.$nextTick(() => {
        this.$refs.mainPage.$el.children[3].innerHTML =
          "总共" + " " + this.listNum + " " + "条记录";
        this.$refs.mainPage.$el.children[3].style.margin = "0 10px 0 10px";
      });
    },
    pageChange(currentPage: number) {
      this.currentPage = currentPage;
      this.cardList = [];
      this.list_loading_resource = true;
      if (this.$route.query.q !== undefined) {
        this.search_resource(this.$route.query.q, currentPage, 6);
      } else {
        this.search_resource(this.$route.name, currentPage, 6);
      }
    },

    search_resource(
      qtext: string | null | undefined,
      r_pageNum: number,
      r_pageSize: number
    ) {
      let that = this;
      if (
        localStorage.pg_username == undefined ||
        localStorage.pg_token == undefined
      ) {
        this.$message.warning("登陆后解锁浏览权限",1500);
        this.$router.push("/login");
        return false;
      }
      this.$axios({
        url: "http://localhost:8080/findResource/getResource",
        method: "get",
        headers: {
          token: localStorage.pg_token,
        },
        params: {
          userId: localStorage.pg_username,
          q: qtext,
          pageNum: r_pageNum,
          pageSize: r_pageSize,
        },
        transformResponse: [
          function (data) {
            // 对接收的 data 进行任意转换处理
            let result = JSON.parse(data);
            if (result.code === 200) {
              that.cardList = result.data.result;
              // console.log(that.cardList)
              that.listNum = result.data.page_sum;
              if (result.data === null) {
                that.infoStatus = true;
              }
            } else {
              that.infoStatus = true;
              that.$message.warning(result.msg);
            }
            that.list_loading_resource = false;
            that.pageNationView = true;
            return data;
          },
        ],
      })
        .catch(function (error) {
          if (error.response) {
            // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
            that.$message.error("服务器响应出错，请稍后再试");
            // console.log(error.response.data);
            // console.log(error.response.status);
            // console.log(error.response.headers);
          } else if (error.request) {
            // 请求已经成功发起，但没有收到响应
            // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
            // 而在node.js中是 http.ClientRequest 的实例
            that.$message.error("请求服务器错误或超时,请稍后再试");
          } else {
            // 发送请求时出了点问题
            that.$message.error("发送请求出现问题，请稍后再试");
          }
          // console.log(error.config);
          taht.list_loading_resource = false;
          that.loginStatus = false;
          this.changePageTotalStyle();
        })
        .then(() => {
          this.changePageTotalStyle();
        });
    },
    changeChecked(index) {
      this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
      console.log(this.$route.meta.title);
    },
    backHome() {
      // console.log('back');
      this.$router.push("/Home");
    },
  },
  wathch: {
    $route: function (newVal, oldVal) {},
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #000000;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
}

.card_child:hover .home_card_title {
  color: #0d84ff;
  font-weight: 500;
  transition: 0.1s;
}

.re-card-list {
  margin-top: 0px !important;
  height: 100%;
  box-sizing: border-box;
  cursor: default !important;
  text-align: left;
}

.re-card-list-item {
  margin: 5px;
  /* width: max-content; */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.bottom {
  padding: -5px;
}

.home_card_title {
  color: #000000;
}

.home_card_content {
  /* padding: 10px; */
  color: #999999;
  font-size: 14px;
  text-align: left;
  margin: 10px 0 10px 0;
  /* min-height: 35px; */
  /*控制文字行数*/
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.image {
  border-radius: 5%;
}

.re-card-page {
  width: -webkit-fill-available;
  cursor: default !important;
  margin: 0 10px;
  border-radius: 0.3125rem;
}

.main-card-child:hover .card_title {
  color: rgb(13, 132, 255);
  font-weight: 500;
  transition: 0.1s;
}

.main-card-child {
  margin: 10px;
  cursor: pointer;
}

.re-card-list {
  margin-top: 0px !important;
  height: 100%;
  box-sizing: border-box;
  cursor: default !important;
  text-align: left;
}

.card_content {
  padding: 10px;
  color: #999999;
  font-size: 14px;
  text-align: left;
}

.content-header {
  display: flex;
  flex-grow: 1;
  margin: 0 5px 0 5px;
  flex-direction: column;
  /* flex-wrap: wrap; */
  /* background-color: #FFF; */
}

.el-button:active {
  border-color: #1890ff;
  color: #1890ff;
  background-color: #ecf5ff;
}

.re-card-lable {
  display: flex;
  align-items: stretch;
  text-align: center;
  height: 100%;
}

.re-card-lable-content {
  display: flex;
  align-items: center;
  text-align: left;
  margin-bottom: 1.25rem;
  /* height: 100%; */
}

.grid-content {
  margin-bottom: 0.9375rem;
  border-radius: 4px;
  min-height: 30px;
}

.bg-purple {
  background: #d3dce6;
}

.re-card-control {
  margin: 0.3125rem 0 0.3125rem 0;
  width: -webkit-fill-available;
}

.re-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mian-card-header {
  height: 70px;
  width: 100%;
  margin: 0;
}

/* .el-page-header__left{
		width: 0;
		display: none;
	} */
</style>
